import React,{ Component} from 'react';
import { connect } from 'react-redux';
import { Form, Input, Button, Icon } from 'antd';
import { showInputMessage } from '../redux/input.redux';

const FormItem = Form.Item;

@connect(
    state=>state.inputMessage,
    { showInputMessage }
)
class Setting extends Component {

    constructor(props) {
        super(props);

        this.state = {
            
        }
    }

    handleSubmit = (e) => {
        e.preventDefault();
        this.props.form.validateFields((err, values) => {
            if (!err) {
                this.props.showInputMessage(values.msg);
            }
        });
    }

    render(){
        const { getFieldDecorator } = this.props.form;
        return(
            <Form onSubmit={this.handleSubmit}>
                    <span>{this.props.message}</span>
                    <FormItem>
                        {getFieldDecorator('msg', {
                            rules: [{ required: false, message: this.state.message }],
                        })(
                            <Input prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />} autoComplete="off" autoFocus placeholder="信息"/>
                        )}
                         <Button type="primary" htmlType="submit" className="login-form-button">
                            提交
                        </Button>
                    </FormItem>
             </Form>
        )
    }
}

const WrappedNormalLoginForm = Form.create()(Setting);
export default WrappedNormalLoginForm;